<script setup lang="ts">
import { useStore } from '@store/index';
import { MusicList } from '@/type';
import { useRouter } from 'vue-router';
const BASEURL = useStore().getBaseUrl()
const router = useRouter()
const props = defineProps<{ CD: MusicList[] }>()
const toMusicListPage = (id: number | string) => {
    router.push({
        name: 'musicList',
        params: {
            musicListId: id,
            disableSlide: 0
        }
    })
}
</script>
<template>
    <div class="container">
        <div @click="toMusicListPage(cd.id as string)" class="cd" v-for="cd of props.CD">
            <img class="cd-image" :src="BASEURL + '/static/image/' + cd.image">
            <h3 class="title">
                {{ cd.title }}
            </h3>
            <span class="date">{{ `${cd.createDate}` }}</span>
        </div>
    </div>
</template>
<style lang="css" scoped>
.cd {
    margin-bottom: 20px;
    cursor: pointer;
}

.date {
    font-size: 12px;
    color: #999;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 120px);
    justify-content: space-between;
}

.title {
    margin: 2px 0;
    font-weight: normal;
    font-size: 14px;
}

.cd-image {
    width: 120px;
    height: 120px;
}
</style>